<template>
    <div class="tab-bar-item" @click="itemClick">
        <div v-show="!isActive"><slot  name="img"></slot></div>
        <div v-show="isActive"><slot  name="img2"></slot></div>
        <div :style="Color"><slot name="text"></slot></div>
        
      </div>
</template>


<script>
export default {
    data() {
        return {
            // isActive: true
        }
    },
    props: {
        path: {
            type: String,
            default: ''
        },
        textColor: {
            type: String,
            default: 'red'
        }
    },
    methods: {
        itemClick() {
            if (this.path === this.$route.path) return
            this.$router.push(this.path)
        }
    },
    computed: {
        isActive() {
            // return this.path === this.$route.path
            return this.$route.path.indexOf(this.path) !== -1
            // console.log(this.$route.path.indexOf(this.path) !== -1);
            
        },
        Color() {
            return this.isActive ? {color: this.textColor} : {}
        }
    }
}
</script>


<style scoped>
     .tab-bar-item{
        flex: 1;
        height: 49px;
  }

  .tab-bar-item img{
    width: 22px;
    height: 22px;
    vertical-align: middle;
  }

 /* .tab-bar-item .active{
    color: red;
  } */
</style>